<template>
  <div class="sl_select_place__container">
    <div class="tabs__group">
      <div class="item" :class="{'active': active}" @click="active = true">专车</div>
      <div class="item" :class="{'active': !active}" @click="active = false">快车</div>
    </div>
    <div class="popup__group">
      <div class="user_car__time">
        <icon type="icon-shijian2" size="2"/>
        <div class="subscribe-warp">
          <!-- 预约时间显示 -->
          <div class="subscribe_time" v-show="handleSubScribeTime">
            {{ handleSubScribeTime }}
          </div>
          <!-- 显示当前 -->
          <div class="car-now" @click="onClickCurrent">
            现在
          </div>
          <div class="car-subScribe" v-show="!handleSubScribeTime" @click="onClickSubScribe">
            预约
          </div>
        </div>
      </div>
      <div class="user__car_current" @click="onClickSetStartAddress">
        <div class="dot"></div>
        <small>[当前]</small>
        <p v-show="handleGeolocaltionState === 'SUCCESS'">{{ handleStartAddress.address }}</p>
        <p class="color-default" v-show="handleGeolocaltionState === 'FAIL'">定位失败请手动设置</p>
        <div class="loading_current_place" v-show="handleGeolocaltionState === 'LOADING'">
          定位当前位置中...
          <spinner type="ios" size="20px"/>
        </div>
      </div>
      <div class="user__car_to" @click="onClickSetEndAddress">
        <div class="dot"></div>
        <p :class="{'color-default': handleEndAddress.address === ''}">
          {{handleEndAddress.address === '' ? '你要去哪儿' : handleEndAddress.address}}
        </p>
      </div>
    </div>
    <popup-picker v-model="popupPickerValue"
                  :data="popupPickerData"
                  :show.sync="dateTimeVisible"
                  :show-cell="false"
                  @on-show="onShowDateTime"
                  @on-change="onChangeDateTime"/>
    <x-button @click.native="onClickSubmit">去选车</x-button>
  </div>
</template>
<script>
import storejs from 'storejs'
import { mapState, mapGetters, mapMutations } from 'vuex'
import * as util from 'utils/utils'
import { XButton, Spinner, PopupPicker, Datetime, TransferDomDirective as TransferDom } from 'vux'
export default {
  name: 'car-start-address-end',
  directives: { TransferDom },
  components: { Spinner, PopupPicker, Datetime, XButton, TransferDom },
  data () {
    return {
      active: true,
      dateTimeVisible: false,
      isOnceLoad: true,
      popupPickerData: [],
      popupPickerValue: [],
      pickerSelectedValue: []
    }
  },
  mounted () {
    // 生成预约时间数据
    this.popupPickerData = util.generatePopupTimeDate();
  },
  computed: {
    ...mapGetters(['handleStartAddress', 'handleEndAddress', 'handleGeolocaltionState']),
    ...mapState(['userCarState']),
    handleSubScribeTime () {
      if (this.pickerSelectedValue.length < 1) {
        return false
      }
      return this.pickerSelectedValue.join(' ')
    }
  },
  methods: {
    ...mapMutations([
      'SET_USER_CAR_TIME',
      'SET_USER_CAR_PRODUCT_ID',
      'SET_USER_CAR_TYPE',
      'SET_USER_CAR_CAR_USER_TIME'
    ]),
    onClickSetStartAddress () {
      this.$router.push({
        path: '/carIndex/selectAddress/startAddress'
      })
    },
    onClickSetEndAddress () {
      this.$router.push({
        path: '/carIndex/selectAddress/endAddress'
      })
    },
    onClickSubScribe () {
      this.dateTimeVisible = true;
    },
    onShowDateTime () {
      let currentTime = util.formatCurrentDateInit(new Date());
      if (!util.arrayEqual(currentTime, this.popupPickerValue)) {
        this.isOnceLoad = true;
      }
      this.popupPickerValue = util.deepClone(currentTime);
    },
    onChangeDateTime (time) {
      if (this.isOnceLoad) {
        this.isOnceLoad = false;
        return false;
      }
      this.pickerSelectedValue = time;
      this.SET_USER_CAR_TIME(this._formatDate(time));
      this._isProductId();
    },
    onClickCurrent () {
      this.pickerSelectedValue = [];
      this._isProductId();
    },
    _formatDate (date) {
      let dateStr = date.join(' ');
      let year = dateStr.slice(0, dateStr.indexOf('年'));
      let month = dateStr.slice(dateStr.indexOf('月') - 2, dateStr.indexOf('月'));
      let day = dateStr.slice(dateStr.indexOf('日') - 2, dateStr.indexOf('日'));
      let h = dateStr.slice(dateStr.indexOf('点') - 2, dateStr.indexOf('点'));
      let m = dateStr.slice(dateStr.indexOf('分') - 2, dateStr.indexOf('分'));
      return new Date(`${year}-${month}-${day} ${h}:${m}`).getTime();
    },
    _isProductId () {
      if (this.active) {
        this.SET_USER_CAR_TYPE(0);
        this.pickerSelectedValue.length === 0 ? this.SET_USER_CAR_PRODUCT_ID(19) : this.SET_USER_CAR_PRODUCT_ID(11)
      } else {
        this.SET_USER_CAR_TYPE(1);
        this.pickerSelectedValue.length === 0 ? this.SET_USER_CAR_PRODUCT_ID(18) : this.SET_USER_CAR_PRODUCT_ID(10)
      }
    },
    onClickSubmit () {
      if (this.userCarState.callCarParams.carUserTime === '') {
        this.SET_USER_CAR_TIME(new Date().getTime())
      }
      storejs.set('USER_CAR_PARAMS', this.userCarState.callCarParams);
      this.$router.push('/carIndex/carType')
    }
  },
  watch: {
    active () {
      this._isProductId();
    }
  }
}
</script>
<style lang="stylus" type="text/stylus">
  @import "~assets/css/theme"

  .sl_select_place__container
    width 95%
    position fixed
    left 50%
    bottom 0
    transform translateX(-50%)
    .tabs__group
      margin-bottom 2px
      background #fff
      display inline-block
      overflow hidden
      border-top-left-radius 5px
      border-top-right-radius 5px
      font-size 0
      .item
        padding 1 * .61rem 1.5 * .61rem
        font-size $sl_font_size_14
        display inline-block
        &.active
          background #ddd
          color #999
    .popup__group
      padding 0 2 * .61rem
      background #FFF
      >div
        height 2.5rem
      .user_car__time
        display flex
        align-items center
        .icon
          width 30px
          position relative
          left -5px
        .subscribe-warp
          width 100%
          display: flex
          justify-content space-between
          align-items center
          font-size $sl_font_size_default
          color $sl_font_color_default
          .subscribe_time
            font-size $sl_font_size_small
          .car-now, .subscribe_time
            display flex
            align-items center
            color $sl_font_color_default
            .icon
              margin-right 10px
              color $sl_font_color_desc
          .car-subScribe
            padding 0.6 * .61rem 1 * .61rem
            background #f60
            color #fff
            border-radius .2 * .61rem
      .user__car_current
        display flex
        align-items center
        box-sizing border-box
        border-top 1px #ddd solid
        border-bottom 1px #ddd solid
        .dot
          border-radius 50%
          margin-right 1 * .61rem
          border 5px solid #46a1bb
        >small
          color #46a1bb
          font-size  $sl_font_size_small
          margin-right .8 * .61rem
        >p
          width 70%
          color $sl_font_color_default
          font-size $sl_font_size_14
          overflow hidden
          text-overflow ellipsis
          -webkit-line-clamp 1
          white-space nowrap
        .loading_current_place
          color $sl_font_color_desc_s
          font-size  $sl_font_size_small
      .user__car_to
        display flex
        align-items center
        .dot
          border-radius 50%
          margin-right 1 * .61rem
          border 5px solid #ff9800
        >p
          font-size $sl_font_size_14
          overflow hidden
          text-overflow ellipsis
          -webkit-line-clamp 1
          white-space nowrap
    .weui-btn
      margin 10px 0
      background #46a1bb
      color: #fff
    .color-default
      color $sl_font_color_desc !important
  .vux-popup-dialog
    overflow hidden
</style>
